<template>
  <div style="width: 100%;">
    <div v-if="orders.length != 0">
      <el-scrollbar :style="{ height: slbHeight }">
        <!--  已送达 -->
        <div v-for="(order, index) in orders" :key="index" class="scrollbar-item">
          <OrderCard v-bind="order" />
        </div>
      </el-scrollbar>
    </div>
    <div v-else>
      <el-empty description="暂无订单" />
    </div>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus';
import OrderCard from './OrderCard.vue';

const ordersAll = [{
  orderId: '1',
  state: 'done',
  stateDisc: '已完成',
  storeImg: 'img/newPic/ikun1.png',
  storeName: 'IKun专属店',
  foods: [{ name: '炸鲲', img: 'img/dcfl10.png' }, { name: '炸鲲', img: 'img/dcfl10.png' }, { name: '炸鲲', img: 'img/dcfl01.png' }, { name: '炸鲲', img: 'img/dcfl01.png' }, { name: '炸鲲', img: 'img/dcfl01.png' }, { name: '炸鲲', img: 'img/dcfl01.png' }, { name: '炸鲲', img: 'img/dcfl01.png' }, { name: '炸鲲', img: 'img/dcfl01.png' }, { name: '炸鲲', img: 'img/dcfl01.png' }, { name: '炸鲲', img: 'img/dcfl01.png' }, { name: '炸鲲', img: 'img/dcfl01.png' }],
  orderTime: new Date().toLocaleString(),
  cost: 66.60,
  preferential: [{ disc: "新用户优惠", price: 2 }, { disc: "老用户优惠", price: 20 }]
},
{
  orderId: '2',
  state: 'toBeEvaluated',
  stateDisc: '待评价',
  storeImg: 'https://tse2-mm.cn.bing.net/th/id/OIP-C.OQ8sP6pgSL8PBxE7r_uRyAHaHa?rs=1&pid=ImgDetMain',
  storeName: 'Ikun店（懒羊羊联名限定）',
  foods: [{ name: '炸鲲', img: 'img/dcfl10.png' }, { name: '炸鲲', img: 'img/dcfl01.png' }],
  orderTime: new Date().toLocaleString(),
  cost: 66.60,
  preferential: [ { disc: "老用户优惠", price: 20 }]
},
{
  orderId: '3',
  state: 'done',
  stateDisc: '已完成',
  storeImg: 'img/newPic/21.jpg',
  storeName: '原神联名店',
  foods: [{ name: 'a', img: 'img/newPic/93.jpg' }, { name: 'aa', img: 'img/newPic/93.jpg' }],
  orderTime: new Date().toLocaleString(),
  cost: 6480.00,
  preferential: [{ disc: "新用户优惠", price: 2 }, { disc: "老用户优惠", price: 20 }]
},
{
  orderId: '4',
  state: 'ongoing',
  stateDisc: '正在运送',
  storeImg: 'img/newPic/21.jpg',
  storeName: '原神联名店',
  foods: [{ name: 'doge', img: 'img/newPic/93.jpg' }, { name: 'doge1', img: 'img/newPic/93.jpg' }],
  orderTime: new Date().toLocaleString(),
  cost: 64800.00,
  preferential: [{ disc: "新用户优惠", price: 2 }, { disc: "老用户优惠", price: 20 }]
},
{
  orderId: '5',
  state: 'ongoing',
  stateDisc: '正在运送',
  storeImg: 'img/newPic/21.jpg',
  storeName: '原神联名店',
  foods: [{ name: 'doge', img: 'img/newPic/93.jpg' }, { name: 'doge1', img: 'img/newPic/93.jpg' }, { name: 'doge1', img: 'img/newPic/93.jpg' }],
  orderTime: new Date().toLocaleString(),
  cost: 64800.00,
  preferential: [{ disc: "新用户优惠", price: 2 }, { disc: "老用户优惠", price: 20 }]
}
];

const orders = ordersAll.concat();

export default {
  mounted() {
    this.clientHeight = `${document.documentElement.clientHeight}`;//获取浏览器可视区域高度
    let that = this;
    window.onresize = function () {
      this.clientHeight = `${document.documentElement.clientHeight}`;
      that.slbHeight = this.clientHeight - 180 + 'px';
    }
  },
  watch: {
    clientHeight() { // 如果clientHeight 发生改变，这个函数就会运行
      this.changeFixed(this.clientHeight)
    },
    orderState() { // 订单类型变化处理
      // console.log(this.orderState);
      // orders.length = 0;
      // if (this.orderState === 'all') {
      //   orders.push(...ordersAll.concat());
      // } else {
      //   orders.push(ordersAll.filter(o => { o.state === this.orderState }));
      // }
      // console.log(orders);
    }
  },
  methods: {
    changeFixed(clientHeight) {
      this.slbHeight = clientHeight - 180 + 'px';
    },
  },
  data() {
    return {
      ElMessage,
      slbHeight: '',
      clientHeight: '',
      orders,
      ordersAll,
    }
  },
  components: {
    OrderCard
  },
  props: ['orderState'],
}
</script>

<style scoped>
.scrollbar-item {
  width: 95%;
  margin: 10px;
}
</style>
